<template>
    <view class="live-page">
         <uni-nav-bar dark fixed shadow background-color="#667eea" status-bar left-icon="settings" 
            title="录播"  @clickLeft="settingRef.open()" />
             <search-date @search="handleSearch" @dateChange="handleDateChange" />
        <!-- 列表 -->
        <scroll-view scroll-y refresher-enabled @scrollToLower="loadMore">
            <view class="live-list">
                <view v-for="item in liveList" :key="item.id" class="live-card" @click="toDetail(item.video_id)">
                    <!-- 封面 -->
                    <view class="cover-box">
                        <image class="cover" :src="item.cover_image" mode="aspectFill" />
                        <!-- 观看人数 -->
                        <view class="count">
                            <!-- <text>👁</text> -->
                            <uni-icons type="heart" color="#fff" size="14" />
                            <text>{{ formatCount(item.view_count || 0) }}</text>
                        </view>
                        <!-- 直播中 -->
                        <!-- <view class="live-badge">直播中</view> -->
                    </view>

                    <!-- 下方信息 -->
                    <view class="info">
                        <text class="title">{{ item.title }}</text>
                        <view class="up-row">
                            <!-- <image class="face" :src="item.headPortraitUri" /> -->
                            <!-- <text class="up-name">{{ item.speaker }}</text> -->
                            <text class="time">{{ item.startTime }}</text>
                        </view>
                        <view class="tag-row">
                            <text class="tag">{{ item.grade }}</text>
                            <text class="tag">{{ item.subject }}</text>
                        </view>
                        <text class="school">{{ '云师大附中' }}</text>
                        <!-- <text class="school">{{ item.schoolName }}</text> -->
                    </view>
                </view>
            </view>
            <uni-load-more :status="moreStatus"></uni-load-more>
        </scroll-view>
        <!-- 弹出-->
        <leftSetting  ref="settingRef" />
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import uniReq from '@/api/uniReq';
import leftSetting from '@/components/leftSetting/leftSetting.vue'
import searchDate from '@/components/searchDate/searchDate.vue'

const moreStatus = ref('more')
const settingRef = ref(null)

// 直播列表/分页参数
const liveList = ref([])
const params = ref({
    pageIndex: 1,
    pageSize: 50,
    searchKey: '',
})

// 获取直播列表
const getLiveList = async () => {
    moreStatus.value = 'loading'
    const res = await uniReq({
        url: '/v3/video/pageWithExt',
        method: 'GET',
        data: params.value
    })
    if (res.code === 200 && res.data.list.length > 0) {
        liveList.value = res.data.list
        moreStatus.value = 'more'
    } else {
        uni.showToast({
            title: res.massage,
            icon: 'none'
        })
        moreStatus.value = 'noMore'
    }
    console.log(liveList.value);
}

// 格式化在线人数
function formatCount(num) {
    return num > 9999 ? (num / 10000).toFixed(1) + '万' : num
}

// 搜索
const handleSearch = (keyword) => {
    params.value.searchKey = keyword
    params.value.pageIndex = 1
    getLiveList()
}
// 日期变化
const handleDateChange = (date) => {
    params.value.startTimeGe = date
    params.value.pageIndex = 1
    getLiveList()
}

const toDetail = (id) => {
    uni.navigateTo({
        url: '/pages/video/record/recordDetail?id=' + id
    })
}

onMounted(() => {
    getLiveList()
})

const loadMore = async () => {
    params.value.pageIndex++
    moreStatus.value = 'loading'
    const res = await uniReq({
        url: '/v3/video/pageWithExt',
        method: 'GET',
        params: params.value
    })
    if (res.code === 0) {
        liveList.value = [...liveList.value, ...res.data.list]
        moreStatus.value = 'more'
    } else {
        uni.showToast({
            title: res.massage,
            icon: 'none'
        })
        moreStatus.value = 'noMore'
    }
}
</script>

<style lang="scss" scoped>
.live-page {
    padding: 20rpx 10rpx;
    padding-top: 0;
    background: #f5f5f5;
    min-height: 100vh;
}

/* 两列瀑布流 */
.live-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.live-card {
    width: 48%;
    margin-bottom: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
}

/* 封面区域 */
.cover-box {
    position: relative;

    .cover {
        width: 100%;
        height: 200rpx;
    }

    .count {
        position: absolute;
        left: 10rpx;
        bottom: 20rpx;
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        padding: 4rpx 10rpx;
        border-radius: 20rpx;

        .iconfont {
            font-size: 22rpx;
            margin-right: 6rpx;
        }
    }

    .live-badge {
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        background: #fb4d4d;
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 10rpx;
        border-radius: 20rpx;
    }
}

/* 信息区 */
.info {
    padding: 12rpx;

    .title {
        font-size: 28rpx;
        color: #333;
        line-height: 40rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .up-row {
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        .face {
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            margin-right: 8rpx;
        }

        .up-name {
            font-size: 24rpx;
            color: #666;
        }

        .time {
            font-size: 22rpx;
            color: #666;
            margin-left: 8rpx;
        }
    }

    .tag-row {
        margin-top: 8rpx;

        .tag {
            display: inline-block;
            font-size: 22rpx;
            color: #2189ff;
            background: #e6f2ff;
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
        }
    }

    .school {
        font-size: 22rpx;
        color: #666;
    }
}

:deep(.uni-navbar__header-btns-left) {
  width: 60rpx !important;
}

</style>